<template>
  <div class="pageChange" :style="`bottom: ${bottom}`" @click.stop>
    <div
      class="homePage"
      :class="isShowMenu ? 'homePage2' : 'homePage1'"
      @click.stop="showMenu"
    >
      <div
        v-if="totalPage > 1"
        class="prev"
        :class="{ showBtn: totalPage > 1, hideBtn: !(totalPage > 1) }"
        @click.stop="prevPage"
      ></div>
      <div
        v-if="totalPage > 1"
        class="next"
        :class="{ showBtn: totalPage > 1, hideBtn: !(totalPage > 1) }"
        @click.stop="nextPage"
      ></div>
    </div>
    <!-- 一级按钮 -->
    <div
      v-if="!isSecondLevel"
      class="menuList"
      :class="{
        menuListOpen: isShowMenu,
        menuListClose: !isShowMenu && !isFirst,
      }"
    >
      <div
        v-for="(btn, index) in firstBtns"
        :key="btn.id"
        class="item"
        :class="{
          ['first' + index]: true,
          itemOpen: isShowMenu,
          itemClose: !isShowMenu && !isFirst,
        }"
        @click="clickMenu(index)"
      >
        <img :src="checkedFir[index] ? btn.src1 : btn.src" alt="" />
        <div class="label">{{ btn.label }}</div>
      </div>
    </div>
    <!-- 二级按钮 -->
    <div
      v-else
      class="menuList"
      :class="{
        menuListOpen: isShowMenu,
        menuListClose: !isShowMenu && !isFirst,
        menuListRotateN: next,
        menuListRotateP: prev,
      }"
      id="circle"
    >
      <div
        v-for="(btn, index) in secondBtns"
        :key="btn.id"
        class="item"
        :class="{
          ['second' + (index + addValue)]: true,
          itemOpen: isShowMenu,
          itemClose: !isShowMenu && !isFirst,
          itemRotateN: next,
          itemRotateP: prev,
        }"
        @click="chooseSec(btn.id)"
      >
        <img
          :src="checkedSecBtn.includes(btn.id) ? btn.src1 : btn.src"
          alt=""
        />
        <el-tooltip
          effect="dark"
          :disabled="btn.label.length < 5"
          :content="btn.label"
          placement="top"
        >
          <div class="label">{{ btn.label }}</div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "PageChange",
};
</script>
<script setup>
import { computed, inject, nextTick, onMounted, watch, defineProps } from "vue";
import useFootBtnsStore from "@/store/modules/footBtns";
import { getAirTypeIds } from "@/api/airSpace/enquiry";

const props = defineProps({
  left: {
    type: String,
    default: "1604px",
  },
  bottom: {
    type: String,
    default: "70px",
  },
});

const footBtnsStore = useFootBtnsStore();
// 是否显示按钮
const isShowMenu = ref(true);
// 页面是否初次渲染
const isFirst = ref(true);
// 是否显示二级按钮
const isSecondLevel = ref(false);
// 二级按钮每页最多5个，记录当前页码与总页数
const currentPage = ref(1);
const totalPage = ref(1);
// 第一级按钮列表
const firstBtns = ref([
  {
    label: "地图样式",
    id: "mapStyle",
    src: "/img/cockpit/mapStyle.png",
    src1: "/img/cockpit/mapStyle1.png",
  },
  {
    label: "空域数据",
    id: "airspace",
    src: "/img/cockpit/airspace.png",
    src1: "/img/cockpit/airspace1.png",
  },
  {
    label: "航线数据",
    id: "airRoute",
    src: "/img/cockpit/airRoute.png",
    src1: "/img/cockpit/airRoute1.png",
  },
  {
    label: "航空器",
    id: "aircraft",
    src: "/img/cockpit/aircraft.png",
    src1: "/img/cockpit/aircraft1.png",
  },
  {
    label: "目标数据",
    id: "Corp",
    src: "/img/cockpit/Corp.png",
    src1: "/img/cockpit/Corp1.png",
  },
  {
    label: "设备数据",
    id: "device",
    src: "/img/cockpit/device.png",
    src1: "/img/cockpit/device1.png",
  },
  {
    label: "气象数据",
    id: "weather",
    src: "/img/cockpit/weather.png",
    src1: "/img/cockpit/weather1.png",
  },
]);
// 当前打开的二级按钮所属的一级按钮索引
const firstIndex = ref(-1);
// 一级按钮的选中状态
const checkedFir = ref([true, false, false, true, false, false, false]);
// 第二级按钮列表
const secondBtns = ref([]);
// 当二级按钮数量小于5个时，类名加值
const addValue = computed(() => {
  if (secondBtns.value.length > 3) {
    return 1;
  } else {
    return 2;
  }
});
// 所有空域id数组
const airspaceId = computed(() => {
  return footBtnsStore.airspaceId;
});
// ---------------------------------------------------  inject 注入方法  ------------------------------------------------------------

/**
 * @添加与移除企业
 * */
const addCompany = inject("addCompany");
const removeCompany = inject("removeCompany");

/**
 * @添加与移除机场
 * */
const addAirport = inject("addAirport");
const removeAirport = inject("removeAirport");

/**
 * @添加与移除通航航线
 * */
const addPlaneLine = inject("addPlaneLine");
const removePlaneLine = inject("removePlaneLine");

/**
 * @添加与移除无人机航线
 * */
const addUAVLine = inject("addUAVLine");
const removeUAVLine = inject("removeUAVLine");

/**
 * @卫星地图与矢量地图切换
 * */
const chooseWXMap = inject("chooseWXMap");
const removeWXMap = inject("removeWXMap");
const chooseTMap = inject("chooseTMap");
const removeTMap = inject("removeTMap");

/**
 * @添加与移除侦测设备
 * */
const addDetectDevice = inject("addDetectDevice");
const removeDetectDevice = inject("removeDetectDevice");

/**
 * @添加与移除反制设备
 * */
const addCounterDevice = inject("addCounterDevice");
const removeCounterDevice = inject("removeCounterDevice");

/**
 * @添加与移除无线电设备
 * */
const addRadioDevice = inject("addRadioDevice");
const removeRadioDevice = inject("removeRadioDevice");

/**
 * @添加与移除空域
 * */
const addAirspace = inject("addAirspace");
const hideAirspace = inject("hideAirspace");

/**
 * @添加与移除风场
 * */
const createWindy = inject("createWindy");
const closeWindy = inject("closeWindy");

/**
 * @显示与隐藏无人机飞行器
 * */
const addDrone = inject("addDrone");
const removeDrone = inject("removeDrone");

/**
 * @显示与隐藏通航飞行器
 * */
const addPlane = inject("addPlane");
const removePlane = inject("removePlane");

/**
 * @显示与隐藏通航飞行器
 * */
const addMHPlane = inject("addMHPlane");
const removeMHPlane = inject("removeMHPlane");

/**
 * @查看温度
 * */
const heatMap = inject("heatMap");
const closeHeatMap = inject("closeHeatMap");

/**
 * @查看降水
 * */
const precipitation = inject("precipitation");
const closePrecipitation = inject("closePrecipitation");

/**
 * @查看云图
 * */
const nephogram = inject("nephogram");
const closeNephogram = inject("closeNephogram");

// ---------------------------------------------------  一级按钮操作  ------------------------------------------------------------

/**
 * @显示按钮
 * */
const showMenu = () => {
  if (isSecondLevel.value) {
    isSecondLevel.value = false;
    // setTimeout(() => {

    // }, 1500);
    secondBtns.value = [];
    firstIndex.value = -1;
    currentPage.value = 1;
    totalPage.value = 1;
    return;
  }
  isShowMenu.value = !isShowMenu.value;
  isFirst.value = false;
};

/**
 * @点击一级按钮获取二级按钮列表
 * */
const clickMenu = (index) => {
  switch (index) {
    case 0:
      secondBtns.value = footBtnsStore.mapStyle;
      break;
    case 1:
      if (footBtnsStore.airspace.length > 5) {
        secondBtns.value = footBtnsStore.airspace.slice(
          (currentPage.value - 1) * 5,
          currentPage.value * 5
        );
        totalPage.value = Math.ceil(footBtnsStore.airspace.length / 5);
      } else secondBtns.value = footBtnsStore.airspace;
      break;
    case 2:
      secondBtns.value = footBtnsStore.airLine;
      break;
    case 3:
      secondBtns.value = footBtnsStore.aircraft;
      break;
    case 4:
      secondBtns.value = footBtnsStore.corp;
      break;
    case 5:
      secondBtns.value = footBtnsStore.device;
      break;
    case 6:
      secondBtns.value = footBtnsStore.weather;
      break;
  }
  firstIndex.value = index;
  isSecondLevel.value = true;
};

// ---------------------------------------------------  按钮选中  ------------------------------------------------------------
// 被选中的二级按钮数组
const checkedSecBtn = ref(["tMap", "fj", "wrj", "mh"]);

/**
 * @点击二级按钮
 * */
const chooseSec = (id) => {
  weatherExclude(id);
  let index = checkedSecBtn.value.findIndex((item) => item === id);
  if (index > -1) {
    noChooseAirspace(id);
    checkedSecBtn.value.splice(index, 1);
    uncheckSec(id);
  } else {
    isChooseAirspace(id);
    checkedSecBtn.value.push(id);
    checkedSec(id);
  }
};

/**
 * @选中二级按钮 ：调用方法在地图添加图标
 * */
function checkedSec(id) {
  switch (id) {
    case "wxMap":
      chooseWXMap();
      if (checkedSecBtn.value.includes("tMap")) {
        let index = checkedSecBtn.value.findIndex((item) => item === "tMap");
        removeTMap();
        checkedSecBtn.value.splice(index, 1);
      }
      break;
    case "tMap":
      chooseTMap();
      if (checkedSecBtn.value.includes("wxMap")) {
        let index = checkedSecBtn.value.findIndex((item) => item === "wxMap");
        removeWXMap();
        checkedSecBtn.value.splice(index, 1);
      }
      break;
    case "thHX":
      addPlaneLine();
      break;
    case "wrjHX":
      addUAVLine();
      break;
    case "fj":
      addPlane();
      break;
    case "wrj":
      addDrone();
      break;
    case "mh":
      addMHPlane();
      break;
    case "qiye":
      addCompany();
      break;
    case "jichang":
      addAirport();
      break;
    case "zhence":
      addDetectDevice();
      break;
    case "fanzhi":
      addCounterDevice();
      break;
    case "wuxiandain":
      addRadioDevice();
      break;
    case "wind":
      createWindy();
      break;
    case "cloud":
      nephogram();
      break;
    case "rain":
      // heatMap();
      precipitation();
      break;
    case "temp":
      heatMap();
      break;
  }
}

/**
 * @取消选中二级按钮 ：调用方法移除图标
 * */
function uncheckSec(id) {
  switch (id) {
    case "wxMap":
      removeWXMap();
      break;
    case "tMap":
      removeTMap();
      break;
    case "thHX":
      removePlaneLine();
      break;
    case "wrjHX":
      removeUAVLine();
      break;
    case "fj":
      removePlane();
      break;
    case "wrj":
      removeDrone();
      break;
    case "mh":
      removeMHPlane();
      break;
    case "qiye":
      removeCompany();
      break;
    case "jichang":
      removeAirport();
      break;
    case "zhence":
      removeDetectDevice();
      break;
    case "fanzhi":
      removeCounterDevice();
      break;
    case "wuxiandain":
      removeRadioDevice();
      break;
    case "wind":
      closeWindy();
      break;
    case "cloud":
      closeNephogram();
      break;
    case "rain":
      closePrecipitation();
      break;
    case "temp":
      closeHeatMap();
      break;
  }
}

/**
 * @天气二级按钮排他
 * */
function weatherExclude(id) {
  // 判断二级按钮是否选中气象
  if (["cloud", "rain", "wind", "temp"].includes(id)) {
    // 气象在二级按钮中的索引
    let index = checkedSecBtn.value.findIndex((item) => item === id);
    // 遍历四个气象
    ["cloud", "rain", "wind", "temp"].forEach((item1) => {
      // 如果选中执行关闭方法
      let index = checkedSecBtn.value.findIndex((item2) => item1 === item2);
      if (index > -1) {
        checkedSecBtn.value.splice(index, 1);
        uncheckSec(item1);
      }
    });
    // 如果按钮已被选中将其添加会数组，以执行后续删除操作
    if (index > -1) checkedSecBtn.value.push(id);
  }
}

/**
 * @展示空域信息
 * */
function isChooseAirspace(id) {
  if (airspaceId.value.includes(id)) {
    addAirspace(id);
  } else return false;
}

/**
 * @隐藏空域信息
 * */
function noChooseAirspace(id) {
  if (airspaceId.value.includes(id)) {
    hideAirspace(id);
  } else return false;
}

/**
 * @监听二级按钮是否被选中调整对应一级按钮图标
 * */
watch(checkedSecBtn.value, (newV, oldV) => {
  switch (firstIndex.value) {
    case 0:
      checkedFir.value[0] = footBtnsStore.mapStyle.some((item) =>
        checkedSecBtn.value.includes(item.id)
      );
      break;
    case 1:
      checkedFir.value[1] = footBtnsStore.airspace.some((item) =>
        checkedSecBtn.value.includes(item.id)
      );
      break;
    case 2:
      checkedFir.value[2] = footBtnsStore.airLine.some((item) =>
        checkedSecBtn.value.includes(item.id)
      );
      break;
    case 3:
      checkedFir.value[3] = footBtnsStore.aircraft.some((item) =>
        checkedSecBtn.value.includes(item.id)
      );
      break;
    case 4:
      checkedFir.value[4] = footBtnsStore.corp.some((item) =>
        checkedSecBtn.value.includes(item.id)
      );
      break;
    case 5:
      checkedFir.value[5] = footBtnsStore.device.some((item) =>
        checkedSecBtn.value.includes(item.id)
      );
      break;
    case 6:
      checkedFir.value[6] = footBtnsStore.weather.some((item) =>
        checkedSecBtn.value.includes(item.id)
      );
      break;
  }
});

// -----------------------------------------------  多按钮时切换分页  ------------------------------------------------------------
const next = ref(false);
const prev = ref(false);

/**
 * @多按钮切换上一页
 * */
const prevPage = () => {
  next.value = false;
  if (currentPage.value === 1) {
    return false;
  }
  currentPage.value = currentPage.value - 1;
  clickMenu(1);
  prev.value = true;
};

/**
 * @多按钮切换下一页
 * */
const nextPage = () => {
  prev.value = false;
  if (currentPage.value === totalPage.value) {
    return false;
  }
  currentPage.value = currentPage.value + 1;
  clickMenu(1);
  next.value = true;
};

onMounted(() => {
  footBtnsStore.getAirspace();
});
</script>

<style scoped lang="scss">
.pageChange {
  position: absolute;
  left: 50%;
  // bottom: 70px;
  width: 432px;
  height: 270px;
  color: white;
  overflow: hidden;
  transform: translateX(-50%);
  // border: 1px solid white;

  .homePage {
    position: absolute;
    bottom: 0;
    z-index: 30;
    background: url("/img/cockpit/homepage1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    left: 46px;
    width: 340px;
    height: 258px;
    cursor: pointer;

    .prev,
    .next {
      position: absolute;
      bottom: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 54px;
      height: 54px;
      font-size: 12px;
      opacity: 0;
    }

    .prev {
      left: -78px;
      background: url("/public/img/cockpit/PREV.png");
      background-size: auto;
      cursor: pointer;
    }
    .next {
      right: -68px;
      background: url("/public/img/cockpit/NEXT.png");
      background-size: auto;
      cursor: pointer;
    }

    .showBtn {
      animation: showBtn 1s 1 alternate linear;
      animation-fill-mode: forwards;
    }

    .closeBtn {
      animation: closeBtn 1s 1 alternate linear;
      animation-fill-mode: forwards;
    }
  }
  .homePage1 {
    animation-name: myAnimation2;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }
  .homePage2 {
    animation-name: myAnimation;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }

  .menuList {
    position: absolute;
    left: 0px;
    bottom: -192px;
    width: 432px;
    height: 432px;
    z-index: 25;
    opacity: 0;
    transform: rotate(180deg);

    .item {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      opacity: 0;
      width: 65px;
      height: 75px;
      transform: rotate(-180deg);
      z-index: 55;
      cursor: pointer;

      img {
        width: 56px;
        height: 56px;
      }

      .label {
        width: 67px;
        height: 18px;
        font-size: 14px;
        text-align: center;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(255, 255, 255, 0);
        background: linear-gradient(
          5deg,
          rgba(73, 136, 181, 0.96) 0%,
          rgba(255, 255, 255, 0.96) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .itemOpen {
      animation: itemOpem 1s 1 alternate linear;
      animation-fill-mode: forwards;
    }

    .itemClose {
      animation: itemClose 0.5s 1 alternate linear;
      animation-fill-mode: forwards;
    }

    .itemRotateN {
      animation: itemRotateN 0.5s 1 alternate linear;
      animation-fill-mode: forwards;
    }

    .itemRotateP {
      animation: itemRotateP 0.5s 1 alternate linear;
      animation-fill-mode: forwards;
    }

    .first0 {
      left: 0;
      bottom: 226px;
    }
    .first1,
    .second1 {
      left: 28px;
      bottom: 305px;
    }
    .first2,
    .second2 {
      left: 80px;
      bottom: 367px;
    }
    .first3,
    .second3 {
      left: 183px;
      bottom: 390px;
    }
    .first4,
    .second4 {
      right: 80px;
      bottom: 367px;
    }
    .first5,
    .second5 {
      right: 28px;
      bottom: 305px;
    }
    .first6 {
      right: 0;
      bottom: 226px;
    }
  }

  .menuListOpen {
    animation: menuOpen 1s 1 alternate linear;
    animation-fill-mode: forwards;
  }

  .menuListClose {
    animation: menuClose 0.5s 1 alternate linear;
    animation-fill-mode: forwards;
  }

  .menuListRotateN {
    animation: menuRotateN 1s 1 alternate linear;
    animation-fill-mode: forwards;
  }

  .menuListRotateP {
    animation: menuRotateP 1s 1 alternate linear;
    animation-fill-mode: forwards;
  }

  @keyframes showBtn {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes closeBtn {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0);
    }
  }

  @keyframes myAnimation {
    from {
      left: 46px;
      width: 340px;
      height: 258px;
    }
    to {
      left: 83px;
      width: 273px;
      height: 179px;
    }
  }

  @keyframes myAnimation2 {
    from {
      left: 83px;
      width: 273px;
      height: 179px;
    }
    to {
      left: 46px;
      width: 340px;
      height: 258px;
    }
  }

  @keyframes menuOpen {
    0% {
      display: block;
      opacity: 0;
      transform: rotate(180deg);
    }
    100% {
      opacity: 1;
      transform: rotate(360deg);
    }
  }

  @keyframes menuRotateN {
    0% {
      opacity: 1;
      transform: rotate(180deg);
    }
    100% {
      opacity: 1;
      transform: rotate(360deg);
    }
  }

  @keyframes menuRotateP {
    0% {
      opacity: 1;
      transform: rotate(180deg);
    }
    100% {
      opacity: 1;
      transform: rotate(360deg);
    }
  }

  @keyframes menuClose {
    0% {
      opacity: 1;
      transform: rotate(360deg);
    }
    100% {
      display: none;
      opacity: 0;
      transform: rotate(180deg);
    }
  }

  @keyframes itemOpem {
    to {
      opacity: 1;
      transform: rotate(-360deg);
    }
  }

  @keyframes itemRotateN {
    0% {
      opacity: 1;
      transform: rotate(-180deg);
    }
    100% {
      opacity: 1;
      transform: rotate(-360deg);
    }
  }

  @keyframes itemRotateP {
    0% {
      opacity: 1;
      transform: rotate(-180deg);
    }
    100% {
      opacity: 1;
      transform: rotate(-360deg);
    }
  }

  @keyframes itemClose {
    0% {
      opacity: 1;
      transform: rotate(-360deg);
    }
    100% {
      opacity: 0;
      transform: rotate(-180deg);
    }
  }
}

.pageChange::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 - Chrome, Safari, and Opera */
}
</style>
